<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app" class="container">
		
		<div class="card mb-3">
		    <div class="card-header">添加品牌</div>
		    <div class="card-body">
				<form action="#" @submit.prevent='add()'>
				    <div class="input-group mb-3 col-4">
				      <div class="input-group-prepend">
				        <span class="input-group-text">品牌名称</span>
				      </div>
				      <input type="text" class="form-control" placeholder="品牌名称" id="usr" name="username" v-model:trim='brand'>	
					  <button type="submit" class="btn btn-primary">添加</button>
				    </div>
				  </form>
			</div> 
		</div>	
		
		<table class="table table-bordered table-striped" >
			<thead>
				<tr>
					<th>#</th>
					<th>品牌名称</th>
					<th>状态</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in list" :key="item.id">
					<td>{{ index }}</td>
					<td>{{ item.name }}</td>
					<td>
							<div class="custom-control custom-switch">
							  <input type="checkbox" class="custom-control-input" :id="'customSwitch'+item.id" v-model="item.status">
							  <label class="custom-control-label" :for="'customSwitch'+item.id" v-if="item.status">已启用</label>
							  <label class="custom-control-label" :for="'customSwitch'+item.id" v-else>已禁用</label>
							</div>
					</td>
					<td>{{ item.time | dateFormat }}</td>
					<td><a href="#" @click.prevent="remove(item.id)">删除</a></td>
				</tr>
			</tbody>
		</table>
		</div>
		<script src="./js/vue.min.js" ></script>
		<script src="https://unpkg.com/dayjs"></script>
		<script>
			Vue.filter('capi',function(str){
				const first = str.charAt(0).toUpperCase();
				const other = str.slice(1);
				return first+other;
			})
			Vue.filter('dateFormat',function(time){
				const dtStr = dayjs(time).format('YYYY-MM-DD')
				return dtStr;
			})
		new Vue({
		  el: '#app',		  
		  data:{
			brand:'',
			nextId:5,
		  	list:[
		  		{id:1,name:"宝马",status:true,time:new Date()},
		  		{id:2,name:"奔驰",status:false,time:new Date()},
		  		{id:3,name:"奥迪",status:true,time:new Date()},
		  		{id:4,name:"大众",status:false,time:new Date()},
		  	]
		  },
		  methods:{
			  remove(id){
				  console.log('aaa' + id);
				  this.list = this.list.filter(item=>item.id !== id);
			  },
			  add(){
				  //console.log(Object);
				  if(this.brand === ''){
					  alert('必须填写品牌名称!');
					  return;
				  }
				  const obj = {
					  id:this.nextId,
					  name:this.brand,
					  status:true,
					  time:new Date()
				  }
				  this.list.push(obj);
				  this.brand = '';
				  this.nextId ++;
			  }
		  },
		  filters:{
			  
		  }
		  
		})
		
		</script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	</body>
</html>